<template>
  <div class="attendance-record-page">
    <!-- 页面标题与返回按钮 -->
    <div class="page-header">
      <h2>考勤记录</h2>
      <el-button type="text" @click="handleReturn">返回</el-button>
    </div>
    <el-divider />

    <!-- 筛选与搜索区 -->
    <div class="filter-search-bar">
      <div class="filter-box">
          <el-select v-model="selectedFilter" placeholder="请选择">
        <el-option label="全部员工" value="all" />
        <el-option label="李悦" value="liyue" />
        <el-option label="张梅" value="zhangmei" />
      </el-select>
      </div>

      <div class="date-tabs">
        <el-button type="primary" :disabled="activeDate === 'today'" @click="activeDate = 'today'">今天</el-button>
        <el-button type="primary" :disabled="activeDate === 'week'" @click="activeDate = 'week'">本周</el-button>
        <el-button type="primary" :disabled="activeDate === 'month'" @click="activeDate = 'month'">本月</el-button>
      </div>

      <div class="search-box">
        <el-input
          v-model="searchKeyword"
          placeholder="请输入关键词"
          style="width: 180px; margin-right: 10px;"
        />
        <el-button type="success" @click="handleSearch">搜索</el-button>
      </div>
    </div>

    <!-- 考勤记录表格 -->
    <el-table
      :data="attendanceList"
      border
      style="width: 100%; margin-top: 20px;"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="50" align="center" />
      <el-table-column prop="name" label="姓名" align="center" />
      <el-table-column prop="date" label="日期" align="center" />
      <el-table-column prop="type" label="上下班打卡" align="center" />
      <el-table-column prop="store" label="打卡门店" align="center" />
      <el-table-column label="打卡状态" align="center">
        <template #default="scope">
          <el-icon :size="16" style="color: #42b983;"><Check /></el-icon>
        </template>
      </el-table-column>
      <el-table-column prop="isLate" label="是否迟到/早退" align="center" />
      <el-table-column prop="remark" label="备注" align="center" />
    </el-table>

    <!-- 分页与统计区 -->
    <div class="pagination-area">
      <div class="record-count">共 {{ total }} 条 共 {{ pageCount }} 页</div>
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30]"
        layout="prev, pager, next, ->, jumper, ->, total, sizes"
        :total="total"
        @current-change="handlePageChange"
        @size-change="handleSizeChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { Check } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';

import { useRouter } from 'vue-router';
const router = useRouter();

// 筛选与搜索数据
const selectedFilter = ref('all');
const activeDate = ref('week'); // 初始选中“本周”
const searchKeyword = ref('');



// 表格数据
const attendanceList = ref([
  {
    name: '李悦',
    date: '2014.11.11 09:39:51',
    type: '上班签到',
    store: '南京21世纪股份有限公司',
    isLate: '未迟到',
    remark: ''
  },
  {
    name: '李悦',
    date: '2014.11.11 18:39:51',
    type: '下班签退',
    store: '南京21世纪股份有限公司',
    isLate: '未早退',
    remark: ''
  },
  {
    name: '张梅',
    date: '2014.11.09 09:39:51',
    type: '上班签到',
    store: '南京21世纪股份有限公司',
    isLate: '未迟到',
    remark: ''
  },
  {
    name: '张梅',
    date: '2014.11.11 14:39:51',
    type: '下班签退',
    store: '南京21世纪股份有限公司',
    isLate: '早退',
    remark: '外出办公'
  }
]);

// 分页数据
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(4);
const pageCount = ref(4);

// 筛选切换
const handleFilterChange = (val) => {
  ElMessage.info(`筛选条件：${val}`);
  // 实际项目中可根据筛选条件请求数据
};

// 日期标签切换
const handleDateChange = (val) => {
  ElMessage.info(`日期范围：${val}`);
  // 实际项目中可根据日期范围请求数据
};

// 搜索操作
const handleSearch = () => {
  ElMessage.info(`搜索关键词：${searchKeyword.value}`);
  // 实际项目中可根据关键词请求数据
};

// 分页切换
const handlePageChange = (val) => {
  currentPage.value = val;
  ElMessage.info(`当前页：${val}`);
  // 实际项目中可请求对应页数据
};

// 每页条数切换
const handleSizeChange = (val) => {
  pageSize.value = val;
  ElMessage.info(`每页条数：${val}`);
  // 实际项目中可请求对应条数数据
};

// 选中行变化
const handleSelectionChange = (val) => {
  ElMessage.info(`选中 ${val.length} 条记录`);
};

// 返回操作
const handleReturn = () => {
//   ElMessage.info('返回上一级页面');
    router.back();
    
};
</script>

<style scoped>
.attendance-record-page {
 
  margin: 0 auto;
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.page-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.filter-search-bar {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.filter-box {
    width: 150px;
}


.date-tabs {
    width: 300px;
  margin: 0 20px;
}

.date-tabs .el-button {
  margin-right: 5px;
}

.search-box {
  margin-left: auto;
}

.pagination-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
}

.record-count {
  color: #666;
}

:deep(.el-icon.Check) {
  color: #42b983;
}
</style>